<template>
  <div class="container">
    <div class="app-container">
      <el-table
        :data="tableData"
        lazy
        stripe
        style="width: 100%"
        class="table"
        v-loading="loading"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          prop="id"
          label="订单编号"
          header-align="center"
          align="center"
          width="160"
        />
        <el-table-column label="采购员" align="center" sortable width="250">
          <template slot-scope="scope">
            <div class="block">
              <span>{{ scope.row.username }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" width="250">
          <template slot-scope="scope">
            <div class="block">
              <el-tag :type="statusType(scope.row.status)" size="small">{{
                scope.row.status
              }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="总金额" align="center" width="250">
          <template slot-scope="scope">
            <div class="block">
              <span>{{ scope.row.totalAmount }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="下单时间" align="center">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{
              leaveTime(scope.row.createTime)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="210" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >详情</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getOrdersAll } from "@/api/order";
import moment from "moment";

export default {
  name: "Order",
  data() {
    return {
      tableData: [],
      loading: true,
    };
  },
  created() {
    this.getOrders();
  },
  methods: {
    async getOrders() {
      this.tableData = await getOrdersAll();
      this.loading = false;
    },
    statusType(status) {
      switch (status) {
        case "已完成":
          return "success";
        case "审批中":
          return "info";
        case "已批准":
          return "";
        case "采购中":
          return "warning";
        case "已取消":
          return "danger";
        default:
          return "info"; // 默认为info类型
      }
    },
    handleEdit(row) {
      // 处理编辑逻辑
      this.$message.success("查询详情," + row.id);
    },
    handleDelete(row) {
      // 处理删除逻辑
      this.$message.success("删除," + row.id);
    },
    // 转换日期格式
    leaveTime(value) {
      return moment(value).format("YYYY-MM-DD HH:mm");
    },
  },
};
</script>